Building Chrome Extension with Zero Web-Dev Knowledge!

Published

December 20, 2024

Screenshot of WebSummarizer Chrome Extension

With all the buzz about Code Generation Models and IDEs, I decided to test them out myself. I’ve been using these tools for my Python/PyTorch projects for a long time now, but I was blown away by how quickly they let me iterate through unfamiliar programming languages.

I managed to create a working Chrome extension in just under 6 hours, and I didn’t spend a single penny! I’m not exactly a web developer, so I’m really impressed with what I accomplished.

I was tinkering with the idea of making a mini version of Microsoft Copilot / Apple Intelligence for a while now, and I wanted to push the limits by running the LLM on the browser. So, I decided to build a Chrome extension that lets me summarize and ask questions about any webpage.

High level overview of the process

  1. I jotted down a quick summary of the idea and its features.
  2. I prompted a LLM to act as a Product Manager and help me create a Product Requirement Document (PRD). After we chatted about the requirements, I made some final changes to the PRD.
  3. Presented the PRD to Cursor’s Composer for the initial Project creation. Then, I used its Chat feature to help it fix any errors and guide it through the process.

Tools

Taking it a step further, I challenged myself to do it all without spending anything from my pocket. Here are the tools that helped me make this a reality.

Models:

  1. Llama3.3 70B Instruct
  2. Claude Sonnet 3.5
  3. Qwen-2.5-Coder-32B

IDE: Cursor

Frameworks: WebLLM

Websites: HuggingChat

Observations

I started out integrating transformers.js for in-browser LLM inference but wasn’t successful at debugging the errors I was running into. Neither did I get much help anywhere.

So, I decided to give WebLLM a try since it had better documentation and more questions answered on Stackoverflow and similar places.

Though Cursor generated working code most of the time and other times it fixed the code after just giving the Stack Trace. It struggled generating code for relatively new libraries like WebLLM. One-shot prompting using the examples from the documentation instantly helped it generate working code.

My skills of going through a new codebase quickly and error debugging(the ones that Cursor couldn’t fix by itself 😂) that I acquired over the period of time helped a lot, reinforcing my belief that one can easily code in a new language if their programming fundamentals are right, which just got further accelerated with these new tools.

Some thoughts

  • When choosing tools or frameworks, make sure they have good documentation and support.
  • Libraries and packages should consider adding llm-ctx, which is a fantastic project by the talented folks at Answer.Ai. It helps add the necessary context to IDEs, making it easier to generate working code.